<!DOCTYPE HTML>
<!--
	Editorial by liwei
-->
<html>

<head>
    <title>${WEB_NAME!}</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
    <meta name="description" content="李维的个人博客。好coding，不求甚解，每有good idea，便欣然忘食。" />
    <meta name="keywords" content="李维, abreaking，个人博客" />
    <meta name="author" content="李维" />
    <link rel="icon" href="${CTPATH}/images/icon/favicon.ico" />
    <!--[if lte IE 8]><script src="${CTPATH}/assets/js/ie/html5shiv.js"></script><![endif]-->
    <link rel="stylesheet" href="${CTPATH}/assets/css/main.css" />
    <!--[if lte IE 9]><link rel="stylesheet" href="${CTPATH}/assets/css/ie9.css" /><![endif]-->
    <!--[if lte IE 8]><link rel="stylesheet" href="${CTPATH}/assets/css/ie8.css" /><![endif]-->

    <script src="${CTPATH}/assets/js/jquery.min.js"></script>
    <script src="${CTPATH}/assets/js/skel.min.js"></script>
    <script src="${CTPATH}/assets/js/util.js"></script>
    <!--[if lte IE 8]><script src="${CTPATH}/assets/js/ie/respond.min.js"></script><![endif]-->
    <script src="${CTPATH}/assets/js/main.js"></script>
</head>

<body>

<!-- Wrapper -->
<div id="wrapper">

    <div id="main">
        <nav  class="menu show-in-phone hide-in-table">
            <ul id="menu-phone">
                <li class="bars"><a  class="fa fa-bars" onclick="lvbar()"></a></li>
                <#include "layout/menu.html"/>
            </ul>
        </nav>
        <div class="inner">
            <header id="header" hidden="hidden">
                留言
            </header>

            <section id="writeMessage">
                <span class="tag">
                    <a href="javascript:void(0)">写留言</a>
                </span>

                <div id="say-hello" >
                    <form  action="http://${WEB_IP}:8080/message/submit" method="post" class="row uniform send-message">
                        <input type="hidden" name="anchor" value="messageBorder">
                        <div class="4u -2u 10u(small)">
                            <input type="text" name="author" placeholder="怎么称呼" />
                        </div>
                        <div class="4u$ 10u$(small)">
                            <input type="text" name="email" placeholder="你的邮箱（可选）"/>
                        </div>
                        <div class="8u$ -2u 12u(small)">
                            <textarea name="text" placeholder="说两句呗" required="required"></textarea>
                        </div>
                        <div class="7u -5u -4u(small)">

                            <ul class="actions">
                                <li><input type="submit" value="提交" class="special"></li>
                                <li><input type="reset" value="重置"></li>
                            </ul>
                        </div>
                    </form>

                </div>
            </section>


            <section class="message_border" id="messageBorder">

                <@jp.messagePage pageSize="10" pageNumber="1">
                <#if page ??>
                <#list page.getList() as message>
                <article class=" 8u -2u 12u$(small)">
                    <div class="row uniform m_content">

                        <div class="m_name 12u">
                            <label class="m_author">${message.author}</label>
                            <span>&nbsp;
                                <script type="text/javascript">
                                    var t ="${message.created}";
                                    document.write(dateFormatByDatetime(t));
                                </script>
                                说
                            </span>
                        </div>
                        <div class="m_text  10u$ -1u">
                            <p>${message.text}</p>
                            <div class="m_reply">
                                <a name="${message.id}" href="javascript:void(0)" onclick="reply(this)">回复</a>
                                <input hidden="hidden" name="parent_id" value="${message.id}" />
                            </div>
                        </div>
                        <!-- 有回复的内容 -->
                        <#if (message.sonNumber>0)>
                        <@jp.messagePage pageSize="20" pId="${message.id}">
                        <#list page.getList() as son>
                        <div class="10u -1u">
                            <div class="row uniform">
                                <div class="12u row uniform	">
                                    <div class="m_name 12u$">
                                        <label class="m_son_author">${son.author}</label>
                                        <span>&nbsp;
                                            <script type="text/javascript">
                                                var t ="${son.created}";
                                                document.write(dateFormatByDatetime(t));
                                            </script>
                                            回复
                                        </span>
                                    </div>
                                    <div class="m_text 10u$ -1u ">
                                        <p>${son.text}</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        </#list>
                        </@jp.messagePage>
                        </#if>


                    </div>
                </article>
                </#list>

            <!-- 这里的分页还不知道怎么整 -->

                </#if>
                </@jp.messagePage>

            </section>

        </div>
    </div>


<!-- Sidebar -->
    <!-- Menu -->
    <#include "layout/sidebar.html"/>


</div>
</div>

</div>



</body>
<script type="text/javascript">

    function reply(e){
        showReplyBorder(e);
        $(e).siblings(".reply-message").show();
    }

    function showReplyBorder(e){
        if($(e).parent().has("form").length>=1){
            return;
        }
        $(e).parent().append("<form  action='${CPATH}/message/submit' method='post'  class='row uniform reply-message'></form>");

        //动态设置下父留言的id
        var parent_id = $(e).siblings("input[name='parent_id']").val();
        $(e).siblings("form").append('<input type="hidden" id="parent_id" name="parent_id" value="'+parent_id+'">');
        $(e).siblings("form").append('<input type="hidden" name="anchor" value="'+parent_id+'">');
        $(e).siblings("form").append('<div class="4u -2u 10u(small)"><input type="text" name="author" placeholder="怎么称呼"/></div>');

        $(e).siblings("form").append('<div class="8u$ -2u 12u(small)"><textarea name="text" placeholder="说两句呗"></textarea></div>');
        $(e).siblings("form").append('<div class="2u -5u" ><input type="submit" value="提交"></div>');
        $(e).siblings("form").hide();
    }
</script>

<script type="text/javascript">
    //加载完毕后，为该visitor生成cookie id
    $(function(){
        //当前访问的那个页面
        var page = $("#header").text();
        //判断浏览器是否支持cookie
        if (!navigator.cookieEnabled){
            page += "&cne=cookie_not_enable";
        }
        record(page);
    })
</script>

</html>